<script setup lang="ts">
import { ref } from 'vue'

// 日期和时间
const date = ref('2023年7月20日')
const startTime = ref('14:30')

// 计时相关数据
const countdown = ref('00:32:45')
const timerStatus = ref('计时中...')
const fetalMoveCount = ref(12)
const isTimerRunning = ref(true)

// 胎动趋势数据
const weeklyData = [
    { day: '周一', count: 6, height: '30%' },
    { day: '周二', count: 9, height: '45%' },
    { day: '周三', count: 12, height: '60%' },
    { day: '周四', count: 14, height: '70%' },
    { day: '周五', count: 10, height: '50%' },
    { day: '周六', count: 8, height: '40%' },
    { day: '周日', count: 11, height: '55%' }
]
const weeklyAverage = ref('12.3')

// 历史记录
const historyRecords = ref([
    { date: '今天', time: '14:30-15:30', count: 12, status: '正常' },
    { date: '昨天', time: '19:00-20:00', count: 14, status: '正常' },
    { date: '07月18日', time: '10:00-11:00', count: 9, status: '正常' },
    { date: '07月17日', time: '15:30-16:30', count: 11, status: '正常' }
])

// 健康状态
const healthStatus = ref({
    status: '正常',
    message: '您的胎动频率在正常范围内，宝宝发育状况良好。'
})

// 交互方法
// 选择日期
const selectDate = () => {
    uni.showToast({
        title: '选择日期',
        icon: 'none'
    })
}

// 选择时间
const selectTime = () => {
    uni.showToast({
        title: '选择时间',
        icon: 'none'
    })
}

// 记录一次胎动
const recordFetalMovement = () => {
    fetalMoveCount.value++
}

// 结束计数
const endCounting = () => {
    isTimerRunning.value = false
    timerStatus.value = '已结束'
    uni.showToast({
        title: '已结束计数',
        icon: 'none'
    })
}

// 查看更多记录
const viewMoreRecords = () => {
    uni.showToast({
        title: '查看更多记录',
        icon: 'none'
    })
}

// 返回上一页
const goBack = () => {
    uni.navigateBack()
}

// 查看帮助
const showHelp = () => {
    uni.showToast({
        title: '查看帮助',
        icon: 'none'
    })
}
</script>

<template>
    <view class="fetal-movement">
        <!-- 页面头部 -->
        <view class="header">
            <view class="header-left">
                <text class="back-icon" @click="goBack">
                    <text class="iconfont icon-arrow-left"></text>
                </text>
                <text class="page-title">胎动记录</text>
            </view>
            <view class="header-right">
                <text class="help-icon" @click="showHelp">
                    <text class="iconfont icon-question"></text>
                </text>
            </view>
        </view>

        <!-- 主内容区 -->
        <view class="main-content" scroll-y>
            <!-- 说明卡片 -->
            <view class="card">
                <view class="card-title">
                    <text class="iconfont icon-info"></text>
                    <text>胎动计数说明</text>
                </view>
                <view class="description">
                    <text>胎动是宝宝健康的重要指标。推荐从孕28周开始每天数胎动。</text>
                </view>
                <view class="tip-box">
                    <text class="iconfont icon-lightbulb"></text>
                    <text>计数方法：选择固定时间，连续计数1小时内的胎动次数</text>
                </view>
            </view>

            <!-- 日期选择 -->
            <view class="card">
                <view class="card-title">
                    <text class="iconfont icon-calendar"></text>
                    <text>选择日期和时间</text>
                </view>
                <view class="date-selector" @click="selectDate">
                    <view>
                        <text class="selector-label">日期</text>
                        <view class="selector-value">{{ date }}</view>
                    </view>
                    <text class="iconfont icon-right"></text>
                </view>
                <view class="date-selector" @click="selectTime">
                    <view>
                        <text class="selector-label">开始时间</text>
                        <view class="selector-value">{{ startTime }}</view>
                    </view>
                    <text class="iconfont icon-right"></text>
                </view>
            </view>

            <!-- 计时工具 -->
            <view class="card">
                <view class="card-title">
                    <text class="iconfont icon-stopwatch"></text>
                    <text>胎动计数器</text>
                </view>
                <view class="timer-display">
                    <view class="countdown">{{ countdown }}</view>
                    <view class="timer-status">{{ timerStatus }}</view>
                </view>
                <view class="counter-display">
                    <view class="counter-circle">
                        <text class="counter-number">{{ fetalMoveCount }}</text>
                    </view>
                    <view class="counter-label">胎动次数</view>
                </view>
                <view class="action-buttons">
                    <button class="button-primary" @click="recordFetalMovement">
                        <text class="iconfont icon-plus"></text>
                        <text>记录一次</text>
                    </button>
                    <button class="button-secondary" @click="endCounting">
                        <text class="iconfont icon-stop"></text>
                        <text>结束计数</text>
                    </button>
                </view>
            </view>

            <!-- 胎动统计图 -->
            <view class="card">
                <view class="card-title">
                    <text class="iconfont icon-chart-bar"></text>
                    <text>本周胎动趋势</text>
                </view>
                <view class="chart-container">
                    <!-- Y轴 -->
                    <view class="y-axis">
                        <text class="axis-label">20</text>
                        <text class="axis-label">15</text>
                        <text class="axis-label">10</text>
                        <text class="axis-label">5</text>
                        <text class="axis-label">0</text>
                    </view>

                    <!-- 图表区域 -->
                    <view class="chart-area">
                        <!-- 网格线 -->
                        <view class="grid-line" style="top: 25%"></view>
                        <view class="grid-line" style="top: 50%"></view>
                        <view class="grid-line" style="top: 75%"></view>

                        <!-- 柱状图 -->
                        <view
                            v-for="(item, index) in weeklyData"
                            :key="index"
                            class="chart-bar"
                            :style="{
                                left: 8 + index * 14 + '%',
                                height: item.height
                            }"
                        ></view>
                    </view>

                    <!-- X轴 -->
                    <view class="x-axis">
                        <text v-for="(item, index) in weeklyData" :key="index" class="axis-label">
                            {{ item.day }}
                        </text>
                    </view>
                </view>
                <view class="chart-summary">
                    近7天平均每小时胎动: <text class="highlight">{{ weeklyAverage }}</text> 次
                </view>
            </view>

            <!-- 历史记录 -->
            <view class="card">
                <view class="card-title">
                    <text class="iconfont icon-history"></text>
                    <text>历史记录</text>
                </view>

                <!-- 记录列表 -->
                <view class="record-list">
                    <view
                        v-for="(record, index) in historyRecords"
                        :key="index"
                        class="record-item"
                    >
                        <view class="record-info">
                            <view class="record-date">{{ record.date }} {{ record.time }}</view>
                            <view class="record-count">1小时内 {{ record.count }}次胎动</view>
                        </view>
                        <view class="record-status">{{ record.status }}</view>
                    </view>
                </view>

                <button class="view-more-btn" @click="viewMoreRecords">查看更多记录</button>
            </view>

            <!-- 健康提示 -->
            <view class="card margin-bottom">
                <view class="card-title">
                    <text class="iconfont icon-heart"></text>
                    <text>健康提示</text>
                </view>
                <view class="health-tip">
                    <view class="health-icon">
                        <text class="iconfont icon-check"></text>
                    </view>
                    <view class="health-content">
                        <view class="health-status">胎动情况{{ healthStatus.status }}</view>
                        <view class="health-message">{{ healthStatus.message }}</view>
                    </view>
                </view>
                <view class="warning-tip">
                    <text class="iconfont icon-warning"></text>
                    <text>孕晚期每小时胎动少于3次或24小时内胎动减少超过一半，建议及时就医</text>
                </view>
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
.fetal-movement {
    background-color: #f9f9f9;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.header {
    background-color: #ffffff;
    padding: 24rpx 32rpx 16rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #f0f0f0;
}

.header-left {
    display: flex;
    align-items: center;
}

.back-icon {
    margin-right: 16rpx;
    font-size: 36rpx;
}

.page-title {
    font-size: 36rpx;
    font-weight: 500;
}

.help-icon {
    font-size: 36rpx;
    color: #333;
}

.main-content {
    flex: 1;
    padding: 32rpx;
    background-color: #f9f9f9;
}

.card {
    background-color: #ffffff;
    border-radius: 24rpx;
    padding: 32rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
    margin-bottom: 32rpx;
}

.card-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
    display: flex;
    align-items: center;
}

.card-title .iconfont {
    margin-right: 16rpx;
    color: #ff9fb5;
}

.description {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 16rpx;
}

.tip-box {
    background-color: #e6f7ff;
    padding: 20rpx;
    border-radius: 16rpx;
    font-size: 28rpx;
    color: #0066cc;
    display: flex;
    align-items: flex-start;
}

.tip-box .iconfont {
    margin-right: 10rpx;
}

.date-selector {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f8f8;
    border-radius: 16rpx;
    padding: 24rpx 32rpx;
    margin-bottom: 32rpx;
}

.selector-label {
    font-size: 24rpx;
    color: #999;
}

.selector-value {
    font-size: 30rpx;
    font-weight: 500;
    margin-top: 4rpx;
}

.timer-display {
    text-align: center;
    margin-bottom: 40rpx;
}

.countdown {
    font-size: 80rpx;
    font-weight: 700;
    color: #333;
    margin-bottom: 8rpx;
}

.timer-status {
    font-size: 28rpx;
    color: #999;
}

.counter-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40rpx;
}

.counter-circle {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    background-color: #ffecf0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16rpx;
}

.counter-number {
    font-size: 60rpx;
    font-weight: 700;
    color: #ff9fb5;
}

.counter-label {
    font-size: 28rpx;
    color: #666;
}

.action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32rpx;
    margin-bottom: 16rpx;
}

.button-primary {
    background-color: #ff9fb5;
    color: white;
    border: none;
    border-radius: 16rpx;
    height: 80rpx;
    width: 280rpx;
    font-size: 32rpx;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button-primary .iconfont {
    margin-right: 8rpx;
}

.button-secondary {
    background-color: #f5f5f5;
    color: #666;
    border: 2rpx solid #ddd;
    border-radius: 16rpx;
    height: 80rpx;
    width: 280rpx;
    font-size: 32rpx;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button-secondary .iconfont {
    margin-right: 8rpx;
}

.chart-container {
    height: 400rpx;
    position: relative;
}

.y-axis {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 40rpx;
    width: 60rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding-right: 10rpx;
}

.chart-area {
    position: absolute;
    top: 0;
    left: 60rpx;
    right: 0;
    bottom: 40rpx;
    border-left: 2rpx solid #eee;
    border-bottom: 2rpx solid #eee;
}

.grid-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2rpx;
    background-color: rgba(0, 0, 0, 0.05);
}

.chart-bar {
    position: absolute;
    bottom: 0;
    width: 8%;
    background-color: #ff9fb5;
    border-radius: 6rpx 6rpx 0 0;
}

.x-axis {
    position: absolute;
    bottom: 0;
    left: 60rpx;
    right: 0;
    height: 40rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.axis-label {
    font-size: 24rpx;
    color: #999;
}

.chart-summary {
    text-align: center;
    font-size: 24rpx;
    color: #999;
    margin-top: 16rpx;
}

.highlight {
    font-weight: 500;
    color: #ff9fb5;
}

.record-list {
    border-top: 2rpx solid #f5f5f5;
}

.record-item {
    padding: 24rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #f5f5f5;
}

.record-date {
    font-size: 28rpx;
    font-weight: 500;
}

.record-count {
    font-size: 24rpx;
    color: #999;
    margin-top: 4rpx;
}

.record-status {
    font-size: 28rpx;
    color: #4caf50;
    font-weight: 500;
}

.view-more-btn {
    margin-top: 32rpx;
    width: 100%;
    height: 80rpx;
    font-size: 28rpx;
    text-align: center;
    color: #999;
    border: 2rpx solid #eee;
    border-radius: 16rpx;
    background-color: #fff;
}

.health-tip {
    background-color: #e8f5e9;
    padding: 20rpx;
    border-radius: 16rpx;
    display: flex;
    align-items: flex-start;
    margin-bottom: 16rpx;
}

.health-icon {
    color: #4caf50;
    margin-right: 16rpx;
    margin-top: 4rpx;
}

.health-content {
    flex: 1;
}

.health-status {
    font-size: 28rpx;
    font-weight: 500;
    color: #2e7d32;
}

.health-message {
    font-size: 24rpx;
    color: #4caf50;
    margin-top: 8rpx;
}

.warning-tip {
    font-size: 24rpx;
    color: #999;
    margin-top: 16rpx;
    display: flex;
    align-items: flex-start;
}

.warning-tip .iconfont {
    margin-right: 8rpx;
}

.margin-bottom {
    margin-bottom: 48rpx;
}
</style>
